<template>

	<div id="tmp">
		<div id="postcomment">
			<h3>提交评论</h3>
			<p class="p"></p>
			<textarea placeholder="请输入评论内容" v-model="postcontent"></textarea>
			<mt-button @click="postcomment" type="primary" size="large">发表</mt-button>
		</div>
		<div id="list">
			<h3>评论列表</h3>
			<p class="p"></p>
			<div v-for="(item,index) in list">
				<div class="title">
				    <span>第{{index+1}}楼</span>  
				    <span>用户: {{item.user_name}}</span>
				    <span>发表时间 : {{item.add_time |datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
			    </div>
			    <ul class="mui-table-view">
				     <li class="mui-table-view-cell" v-text="item.content"></li>
			    </ul>
			</div>
		</div>
		<div class="button"><mt-button plain @click="getmore" type="danger" size="large">获取更多</mt-button></div>
	</div>

</template>



<script>
import common from '../../kits/common.js'
import { Toast } from 'mint-ui'; 
	export default{
		data(){
			return {
				postcontent:'',
				list:[],
				pageindex:1,
			}
		},
		created(){
			this.getcommentlist(this.pageindex);
		},
		props:['id'],
		methods:{
			getmore(){
				this.pageindex++;
				this.getcommentlist(this.pageindex);
				console.log(this.pageindex)
			},
			getcommentlist(pageindex){
				var pageindex = pageindex||1;
				var url = common.apidomain+'/api/getcomments/'+this.id+'?pageindex='+pageindex;
				this.$http.get(url).then(function(res){
					var data = res.body;
					if(data.status != 0){
						Toast(data.message);
						return ;
					}
					this.list = this.list.concat(data.message);
				})
			},
			postcomment(){
				var url = common.apidomain+'/api/postcomment/'+this.id;
				this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
					if(this.postcontent.trim().length<=0){
						Toast('您输入的内容不能为空');
						return;
					}
					Toast(res.body.message);
					this.list = [{"user_name":"匿名用户","add_time":new Date(),"content":this.postcontent}].concat(this.list);
					this.postcontent=''
				})
			}
		}
	}
</script>


<style scoped>
	#postcomment{
		padding: 5px;
	}
	.p{
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #ccc;
	}
	#list{
		padding: 5px;
	}
	.title{
				color: #6d6d72;
				font-size: 15px;
				padding: 5px;
				background-color: #ddd; 
			}
		
</style>

















